<template>
  <div class="page has-navbar" style="background-color: #11c1f3;" v-nav="{title: '首页'}">
    <!-- swiper s -->
    <div class="page-content">
  
      <swiper v-if="banner.length>0" ref="swiper" direction="horizontal" width="100%" height="150" pager-color="#ea5a49" pager-bg-color="#e5e4e3" :callback="callback">
  
        <swiper-item v-for="(bannerItem, key) in banner" :key=key >
  
          <img :src="bannerItem.bannerImg" alt="" style="width:100%;display:block;"  />
  
          <!-- <h1 @click="onClick()"  v-bind:style="{backgroundColor:'red'}">Item 1</h1> -->
  
        </swiper-item>
  
       <!-- <swiper-item height="150">
          <img src="//www.baidu.com/img/bd_logo1.png?qua=high" alt="" style="width:100%;display:block;" />
        </swiper-item> -->
        <!-- <swiper-item height="150">
  
             <img src="//www.baidu.com/img/bd_logo1.png?qua=high" alt="" style="width:100%;display:block;"/>
  
          </swiper-item> -->
  
      </swiper>
  
  
  
      <!-- mian s  -->
  
      <div class="main" ref="main" style=“margin-top:2rem;”>
  
  
  
        <!-- 3 x 2 -->
  
        <cells :items="entrances" :on-cell-click="onCellClick" row="2"></cells>
  
  
  
  
  
      </div>
  
      <!-- main e -->
  
    </div>
  
    <!-- swiper e -->
  
  
  
  
  
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
  
    data() {
  
      return {
        banner:[],
        msg: 'Hello! Vonic.',
  
        showHeader: true,
  
        icons: [
  
          'ion-android-arrow-up',
  
          'ion-android-arrow-down',
  
          'ion-android-arrow-back',
  
          'ion-android-arrow-forward',
  
  
  
          'ion-ios-arrow-up',
  
          'ion-ios-arrow-down',
  
          'ion-ios-arrow-left',
  
          'ion-ios-arrow-right',
  
  
  
          'ion-ios-arrow-thin-up',
  
          'ion-ios-arrow-thin-down',
  
          'ion-ios-arrow-thin-left',
  
          'ion-ios-arrow-thin-right',
  
  
  
          'ion-android-arrow-up',
  
          'ion-android-arrow-down',
  
          'ion-android-arrow-back',
  
          'ion-android-arrow-forward',
  
  
  
          "ion-ios-apps"
  
        ],
  
  
  
        entrances: [
  
          '<div class="entrance assertive"><i class="icon ion-android-arrow-forward"></i> <br><span style="font-size:1rem;font-weight:bold;"> 工作记录</span></div>',
  
          '<div class="entrance energized"><i class="icon ion-android-arrow-forward"></i><br><span style="font-size:1rem;font-weight:bold;">产品</span></div>',
  
  
  
        ]
  
      }
  
    },
  
    created(){
       return axios({
          url: '/user/getBanner',
          method: 'get',
        }).then((e)=>{
          console.log(e)
          this.banner = e.data.data
          console.log(this.$refs.swiper)
          console.log("banner")
          console.log(this.banner);
          this.$refs.swiper.resize();
        }).catch((e)=>{
           console.log(e)
        })
    },
    methods: {
  
      getIcon(iconName, color) {
  
        return '<i class="' + iconName + '"></i>'
  
      },
  
  
  
      onCellClick(e) {
  
        console.log("onCellClick", e)
  
        e == 0 ? $router.push({
  
          path: "/about"
  
        }) : ""
  
        e == 1 ? $router.push({
  
          path: "/work"
  
        }) : ""
  
      },
  
      getItems(n) {
  
        let items = []
  
        for (let i = 0; i < n; i++) {
  
          items.push(this.getIcon(this.icons[i]))
  
        }
  
        return items
  
      }
  
    },
  
    mounted() {
  
  
  
    }
  
  }
</script>
<style lang="scss">
  .entrance {
  
    height: 120px;
  
    padding: 35px 0;
  
    .icon {
  
      font-size: 30px;
  
      line-height: 30px;
  
      width: 30px;
  
      height: 30px;
  
      margin-bottom: 6px;
  
    }
  
    span {
  
      font-size: 14px;
  
      line-height: 14px;
  
    }
  
  }
  
  
  
  .cells.cells-44>.row>.col {
  
    padding: 30px 0;
  
  }
  
  
  
  .cells-33>.row>.col {
  
    padding: 50px 0;
  
  }
  
  
  
  .cells-22>.row>.col {
  
    padding: 30px 0;
  
  }
</style>
<style lang="scss" scoped>
  h2 {
  
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
  
    color: #888;
  
  }
</style>
